<template>
    <el-aside width="100%" style="background-color: rgb(238, 241, 246);font-size: 30rem;text-align: right;">
        {{sec}}
    </el-aside>
    <el-row>
        <el-button type="success" @click="startsec">开始</el-button>
        <el-button type="primary" @click="endsec">停止</el-button>
        <el-button @click="restartsec">重置</el-button>
    </el-row>
    <div class="block">
        <span class="demonstration">起始日期时刻为 12:00:00</span>
        <el-date-picker
                v-model="value1"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']">
        </el-date-picker>
    </div>
    <div class="block">
        <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
        <el-date-picker
                v-model="value2"
                type="datetimerange"
                align="right"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00', '08:00:00']">
        </el-date-picker>
    </div>
</template>

<script>
    import {toRefs, reactive, computed} from 'vue';

    export default {
        name: "sec",
        setup() {
            const state = reactive({
                sec: 0,
                timeout: 0,
                value1: '',
                value2: ''
            });
            // 当前时间提示语
            const currentTime = computed(() => {
                return new Date();
            });

            const startsec = (() => {
                console.log('==>>startsec')
                state.timeout = setInterval(() => {
                    state.sec +=7;
                }, 7);
            });
            const endsec = (() => {
                console.log('==>>endsec')

                clearTimeout(state.timeout);
            });
            const restartsec = (() => {
                console.log('==>>restartsec')

                state.sec = 0;
            });

            return {
                currentTime,
                startsec,
                endsec,
                restartsec,
                ...toRefs(state),
            };
        },
    }
</script>

<style scoped>

    .div-sec {
        width: 100%;
        height: 50rem;
        background-color: #9e9e9e;
        font-size: 20rem;
    }

</style>
